<template>
    <div class="app-container" >
     <el-row     :gutter="20" style="padding: 0px 19px" class="parent" >
 <el-col :span="3.5" v-for="(config) in configList"   :key=" config.id"  class="child" style="margin:0 0 18px 0;text-align:center;">
   <!-- <div class="tip">No.{{++index}}</div> -->
   <el-button  style="  width:100%;height:100px;padding:3px;margin:0px; background-color:#32c8c9 ;color: #fff;text-wrap:wrap;" @click="jump(config)" >

       {{config.name}}
     
   </el-button>
 </el-col>
     </el-row>
     <pagination
        v-show="total>0"
    :page-sizes="[20, 30, 50]"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="charConfig"
      />
    </div>
</template>
<script>
  import { listConfiguration } from "@/api/system/chartConfig";

export default {
 name: "monitor",
 created() {
     this.charConfig();
 },
 methods:{
   charConfig() {
     this.loading = true;
     console.log(this.queryParams)
     listConfiguration(this.queryParams).then((response) => {
       this.configList = response.rows;
       this.loading = false;
       this.total = response.total;
     });
   },
 
   jump(v){
    //  console.log(this.$route.query.queryParams)
      switch (this.$route.query.queryParams) {
        case "1":
            // console.log(v)
            // this.$router.push({ path: '/system/device-data/index', params: {systemId:row.systemId,modality:row.modality}} )
  
             this.$router.push({ path:"/system/chartConfig/tend", query: {currentId:v.id,name:v.name,unit:v.unit}})

            break;
            case "2":
            this.$router.push({ path:"/system/chartConfig/bar", query: {currentId:v.id,name:v.name,unit:v.unit,time:v.time}})
            break;   
            case "3":
            this.$router.push({ path:"/system/chartConfig/instrument", query: {currentId:v.id,name:v.name,unit:v.unit}})
            break;
        default:
            break;
      }
  
   },
 },
 data(){
   return{
    configList: [],
       loading :false,
       total: 0,
        // 查询参数
        queryParams: {
           pageNum: 1,
           pageSize: 20,
           type:this.$route.query.queryParams//1趋势图 2柱状图 3仪表图
        }
 }
}
}
</script>
<style scoped>


.tip {
 margin: 2px;
   padding: 1px;
   color: rgb(52 88 124 / 75%);

   border-radius: 20% 0% 40% 0%;
   background-color: rgb(122 132 216 / 19%);
   position: absolute;float:left;margin: 2px;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.child{
  flex-basis: 20%;
}
</style>
